<template>
    <div class="main el-box-init el-bkgd-white el-pd-20">
        <!-- 表格 -->
        <f-table
            :loading="table.loading"
            :tableCol="tableCol"
            :tableData="table.list"
            :stripe="true"
            :border="true"
        />
        <!-- 表格过滤 -->
        <!-- <el-form :inline="true" class="table-filter el-box-init el-bkgd-white">
            <el-form-item label="关键词" class="el-mg-r-30">
                <el-input
                    v-model="search.keywor"
                    clearable
                    placeholder="输入用户姓名或手机号"
                ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="success" round @click="onSearch">
                    <el-icon class="table-icon"><search /></el-icon>
                    查询
                </el-button>
                <el-button type="warning" round @click="onReset">
                    <el-icon class="table-icon"><refresh /></el-icon>
                    重置
                </el-button>
            </el-form-item>
        </el-form> -->

        <!-- <div class="table-wrap el-box-init el-bkgd-white">
            操作按钮
            <el-row class="table-btn el-pd-b-20">
                <el-button type="primary" v-if="isAuth('SYS_USER_ADD')" @click="onAddOrUpdate()">
                    <el-icon class="table-icon"><plus /></el-icon>
                    新增
                </el-button>
            </el-row>

            <el-table v-loading="loading" :data="list" stripe border ref="tableRef">
                <el-table-column prop="user_account" label="用户名" width="120px"></el-table-column>
                <el-table-column prop="user_name" label="姓名" width="120"></el-table-column>
                <el-table-column prop="user_avatar_url" label="头像" width="80">
                    <template #default="{ row }">
                        <el-popover placement="right" trigger="hover" v-if="row.user_avatar_url">
                            <template #reference>
                                <img class="el-popover-minImg" :src="row.user_avatar_url" />
                            </template>
                            <template #default>
                                <img class="el-popover-img" :src="row.user_avatar_url" />
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="user_email" label="Email"></el-table-column>
                <el-table-column prop="user_phone" label="手机"></el-table-column>
                <el-table-column prop="role_id" label="角色" width="100">
                    <template #default="{ row }">
                        <span>{{ roles(row.role_id) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="账号状态" width="100">
                    <template #default="{ row }">
                        <el-tag :type="row.status === 0 ? '' : 'danger'">
                            {{ row.status === 0 ? '正常' : '冻结' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间">
                    <template #default="{ row }">
                        {{ formatTime(row.created_at) }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    :width="$defaultActionWidth"
                    align="center"
                    fixed="right"
                >
                    <template #default="{ row }">
                        <el-button
                            type="primary"
                            v-if="row.role_id != 1 && isAuth('SYS_USER_UPDATE')"
                            @click="onAddOrUpdate(row.id)"
                        >
                            <el-icon class="table-icon"><edit /></el-icon>
                            编辑
                        </el-button>
                        <el-button
                            type="danger"
                            v-if="row.role_id != 1 && isAuth('SYS_USER_DEL')"
                            @click="onDel(row.id)"
                        >
                            <el-icon class="table-icon"><delete /></el-icon>
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            表格分页
            <el-pagination
                :currentPage="currentPage"
                :page-size="pageSize"
                :page-sizes="pageSizes"
                background
                :layout="layout"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div> -->

        <!-- <dialog-add-or-update ref="addOrUpdate" /> -->
    </div>
</template>

<script>
import { getCurrentInstance, reactive, toRefs } from 'vue';
import { adminUser as Api } from 'api';
// import DialogAddOrUpdate from './add-or-update.vue';

export default {
    components: {
        // DialogAddOrUpdate
    },
    setup() {
        const { proxy } = getCurrentInstance();
        // 表格列
        const tableCol = [
            { prop: 'user_account', label: '用户名' },
            { prop: 'user_name', label: '姓名' },
            {
                prop: 'user_avatar_url',
                label: '头像',
                type: 'popover',
                width: '120',
                align: 'center'
            },
            { prop: 'user_email', label: 'Email' },
            { prop: 'user_phone', label: '手机' },
            {
                prop: 'role_id',
                label: '角色',
                formatter: (row) => {
                    return roles(row.role_id);
                }
            },
            {
                prop: 'status',
                label: '账号状态',
                type: 'tag',
                width: '100',
                formatter: (row, type) => {
                    if (type) {
                        return row.status === 0 ? '' : 'danger';
                    } else {
                        return row.status === 0 ? '正常' : '冻结';
                    }
                }
            },
            { prop: 'created_at', label: '创建日期', type: 'date', align: 'center' }
        ];
        let search = reactive({ keywor: '' });
        let table = reactive({
            loading: false,
            rowId: 0,
            list: [],
            currentPage: proxy.$config.pagination.currentPage, // 默认页
            pageSize: proxy.$config.pagination.pageSize, // 每页多少条
            pageSizes: proxy.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
            layout: proxy.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
            total: 0 // 总条数
        });
        let roleList = reactive([]);

        // 获取用户列表
        const getList = async () => {
            const { code, data } = await proxy.$http.get(Api.getList, {
                params: {
                    keywor: search.keywor,
                    page: table.currentPage, //查询第几页
                    per_page: table.pageSize //每页多少条数据
                }
            });

            if (code === 200) {
                table.list = data.list;
                table.total = data.total;
                // 关闭加载提示
                table.loading = false;
            }
        };
        // 获取角色列表
        const getRoleList = async () => {
            const { code, data } = await proxy.$http.get(Api.getRoleList);

            if (code === 200) {
                data.forEach((item, index) => {
                    roleList[index] = item;
                });
            }
        };
        // // 查询
        // const onSearch = () => {
        //     getList();
        // };
        // // 重置
        // const onReset = () => {
        //     search.keywor = '';
        // };
        // // 打开弹框组件
        // const onAddOrUpdate = (id) => {
        //     proxy.$refs.addOrUpdate.id = id;
        //     proxy.$refs.addOrUpdate.visible = true; // 弹窗开关
        // };

        // 格式化
        const roles = (id) => {
            return proxy.$roles(id, roleList);
        };

        getList();
        getRoleList();

        return {
            tableCol,
            // operation,
            table,
            search
            // onSearch,
            // onReset,
            // onAddOrUpdate
        };

        // let search = reactive({ keywor: '' });
        // let roleList = reactive([]);
        // let table = reactive({
        //     loading: false,
        //     rowId: 0,
        //     list: [],
        //     currentPage: proxy.$config.pagination.currentPage, // 默认页
        //     pageSize: proxy.$config.pagination.pageSize, // 每页多少条
        //     pageSizes: proxy.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
        //     layout: proxy.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
        //     total: 0 // 总条数
        // });

        // // 获取用户列表
        // const getList = async () => {
        //     const { code, data } = await proxy.$http.get(Api.getList, {
        //         params: {
        //             keywor: search.keywor,
        //             page: table.currentPage, //查询第几页
        //             per_page: table.pageSize //每页多少条数据
        //         }
        //     });

        //     if (code === 200) {
        //         table.list = data.list;
        //         table.total = data.total;
        //         // 关闭加载提示
        //         table.loading = false;
        //     }
        // };
        // // 获取角色列表
        // const getRoleList = async () => {
        //     const { code, data } = await proxy.$http.get(Api.getRoleList);

        //     if (code === 200) {
        //         data.forEach((item, index) => {
        //             roleList[index] = item;
        //         });
        //     }
        // };
        // // 删除
        // const onDel = async (id) => {
        //     // 确认删除
        //     const confirm = await proxy.$msgBox.confirm({
        //         cancel: true
        //     });

        //     if (confirm) {
        //         const { code, msg, data } = await proxy.$http.delete(Api.del, {
        //             data: { id }
        //         });

        //         if (code === 200) {
        //             proxy.$msg.success(msg);
        //             getList();
        //         } else {
        //             proxy.$msg.error(msg ? msg : data);
        //         }
        //     }
        // };
        // // 查询
        // const onSearch = () => {
        //     getList();
        // };
        // // 重置
        // const onReset = () => {
        //     search.keywor = '';
        // };
        // // 打开弹框组件
        // const onAddOrUpdate = (id) => {
        //     proxy.$refs.addOrUpdate.id = id;
        //     proxy.$refs.addOrUpdate.visible = true; // 弹窗开关
        // };
        // // 每页多少条
        // const handleSizeChange = (val) => {
        //     table.loading = true;
        //     table.pageSize = val;
        //     getList();
        // };
        // // 当前第几页
        // const handleCurrentChange = (val) => {
        //     table.loading = true;
        //     table.currentPage = val;
        //     getList();
        // };

        // getList();
        // getRoleList();

        // // 格式化
        // const roles = (id) => {
        //     return proxy.$roles(id, roleList);
        // };
        // const formatTime = (value) => {
        //     return proxy.$formatTime(value);
        // };

        // return {
        //     search,
        //     ...toRefs(table),
        //     onSearch,
        //     onReset,
        //     onAddOrUpdate,
        //     onDel,
        //     handleSizeChange,
        //     handleCurrentChange,
        //     getList,
        //     roles,
        //     formatTime
        // };
    }
};
</script>
